@charset "UTF-8";

body {
    margin: 0;
	background-image: url(mx2.png);
	background-size: 100%;
}
.bt{
	width: 100%;
	height: 100%;
	/*position: fixed;*/
}
.operation {
    width: 50%;
    height: 30px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.operation>* {
    float: left;
}

.add_btn {
	width: 60px;
	height: 25px;
	display: flex;
	align-content: center;
	justify-content: center;
	border-radius: 3px;
	background-color: #ee7d7d;
	user-select: none;
}

#updatePanel {
	width: 22%;
	height: 250px;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -70%;
	border-radius: 5px;
	background-color: white;
	box-shadow: 0 0 10px 0 lightgray;
}

#updatePanel label {
	width: 220px;
}

#clickBoard {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(255, 255, 255, 0.6);
}

#updatePanel form {
	text-align: center;
}

.content {
	width: 60%;
	margin: 0 auto;
	border-collapse: collapse;
	border-radius: 5px;
	background-color: #e9e9e9;
	box-shadow: 0 0 5px 0 lightgray;
}

.content tr {
	width: 100%;
	height: 40px;
}

.content tr:nth-child(1) {
	background-color: #71a2b3;
}

.content th {
	width: 100% / 5;
	border-left: 1px solid black;
	border-right: 1px solid black;
	text-align: center;
}

.content td {
	/*width: 100% / 5;*/
	text-align: center;
}

.update_btn {
	width: 80%;
	margin: 0 auto;
	border-radius: 3px;
	background-color: rgb(105, 166, 220);
	box-shadow: -1px -1px 0 0 white;
	user-select: none;
}

.delete_btn {
	width: 80%;
	margin: 0 auto;
	border-radius: 3px;
	background-color: rgb(233, 150, 150);
	box-shadow: -1px -1px 0 0 white;
	user-select: none;
}
/*按钮*/
.custom-btn {
	width: 100px;
	height: 40px;
	color: #fff;
	border-radius: 5px;
	padding: 10px 25px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	background: transparent;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	display: inline-block;
	box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
	7px 7px 20px 0px rgba(0,0,0,.1),
	4px 4px 5px 0px rgba(0,0,0,.1);
	outline: none;
}
.btn-3 {
	background: rgb(0,172,238);
	background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
	width: 130px;
	height: 40px;
	line-height: 42px;
	padding: 0;
	border: none;
}
.btn-3 span {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.btn-3:before,
.btn-3:after {
	position: absolute;
	content: "";
	right: 0;
	top: 0;
	background: rgba(2,126,251,1);
	transition: all 0.3s ease;
}
.btn-3:before {
	height: 0%;
	width: 2px;
}
.btn-3:after {
	width: 0%;
	height: 2px;
}
.btn-3:hover{
	background: transparent;
	box-shadow: none;
}
.btn-3:hover:before {
	height: 100%;
}
.btn-3:hover:after {
	width: 100%;
}
.btn-3 span:hover{
	color: rgba(2,126,251,1);
}
.btn-3 span:before,
.btn-3 span:after {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	background: rgba(2,126,251,1);
	transition: all 0.3s ease;
}
.btn-3 span:before {
	width: 2px;
	height: 0%;
}
.btn-3 span:after {
	width: 0%;
	height: 2px;
}
.btn-3 span:hover:before {
	height: 100%;
}
.btn-3 span:hover:after {
	width: 100%;
}
/*按钮2*/
.btn-5 {
	width: 130px;
	height: 40px;
	line-height: 42px;
	padding: 0;
	border: none;
	background: rgb(255,27,0);
	background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
}
.btn-5:hover {
	color: #f0094a;
	background: transparent;
	box-shadow:none;
}
.btn-5:before,
.btn-5:after{
	content:'';
	position:absolute;
	top:0;
	right:0;
	height:2px;
	width:0;
	background: #f0094a;
	box-shadow:
			-1px -1px 5px 0px #fff,
			7px 7px 20px 0px #0003,
			4px 4px 5px 0px #0002;
	transition:400ms ease all;
}
.btn-5:after{
	right:inherit;
	top:inherit;
	left:0;
	bottom:0;
}
.btn-5:hover:before,
.btn-5:hover:after{
	width:100%;
	transition:800ms ease all;
}
/*按钮3*/
.btn-4 {
	background-color: #4dccc6;
	background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
	line-height: 42px;
	padding: 0;
	border: none;
}
.btn-4:hover{
	background-color: #89d8d3;
	background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
}
.btn-4 span {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.btn-4:before,
.btn-4:after {
	position: absolute;
	content: "";
	right: 0;
	top: 0;
	box-shadow:  4px 4px 6px 0 rgba(255,255,255,.9),
	-4px -4px 6px 0 rgba(116, 125, 136, .2),
	inset -4px -4px 6px 0 rgba(255,255,255,.9),
	inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
	transition: all 0.3s ease;
}
.btn-4:before {
	height: 0%;
	width: .1px;
}
.btn-4:after {
	width: 0%;
	height: .1px;
}
.btn-4:hover:before {
	height: 100%;
}
.btn-4:hover:after {
	width: 100%;
}
.btn-4 span:before,
.btn-4 span:after {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	box-shadow:  4px 4px 6px 0 rgba(255,255,255,.9),
	-4px -4px 6px 0 rgba(116, 125, 136, .2),
	inset -4px -4px 6px 0 rgba(255,255,255,.9),
	inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
	transition: all 0.3s ease;
}
.btn-4 span:before {
	width: .1px;
	height: 0%;
}
.btn-4 span:after {
	width: 0%;
	height: .1px;
}
.btn-4 span:hover:before {
	height: 100%;
}
.btn-4 span:hover:after {
	width: 100%;
}
